<template>
	<div class="liveDataColumn w944">
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}</p>
		</div>
		<div class="content">
			<div class="content_title">
				<span><b>讲师：</b>{{lecturer}}</span>
				<span><b>助教：</b>{{assistant}}</span>
			</div>
			<div class="content_box">
				<div class="box_panel">
					<div class="box_panel1" v-show="show_panel1">
						<span class="active">直播数据</span>
						<span @click="box_panel2">回放数据</span>
					</div>
					<div class="box_panel2" v-show="show_panel2">
						<span @click="box_panel1">直播数据</span>
						<span class="active">回放数据</span>
					</div>
				</div>
				<div class="box_data">
					<ul class="dataUl">
						<li v-if="isBm==1"><span>报名人数</span><em>{{signupCnt}}</em></li>
						<li v-if="isBm!=1"><span>学习人数</span><em>{{studyCnt}}</em></li>
						
						<li><span>完成人数</span><em>{{finish}}</em></li>
						<li><span>未完成人数</span><em>{{nofinish}}</em></li>
						<li><span>点赞</span><em>{{praiseCnt}}</em></li>
						<li><span>平均观看时长（分钟）</span><em>{{avageLearningTime}}</em></li>
					</ul>
					<p class="table_title" v-show="show_panel1">观看学员</p>
					<el-table ref="multipleTable" :data="tableData" border v-show="show_panel1">
						<el-table-column prop="nickname" label="学员名称"></el-table-column>
						<el-table-column label="观看时长">
							<template slot-scope="scope">{{ scope.row.studytime}}</template>
						</el-table-column>
					</el-table>
					<div class="fenyeMargin" v-show="show_panel1">
						<div class="pag_block">
							<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				updateTitle:'',
				liveColumnTitle:'',
				teacherTitle:'',
				lecturerid:'',
				liveBroadcastid:'',
				isBm:'',
				pageTypeNum:'',
				courseCompanyid:'',
				liveId:'',
				tableData:[],
				nowType:'first',
				show_panel1:true,
				show_panel2:false,
				lecturer:'',
				assistant:'',
				signupCnt:'',
				studyCnt:'',
				finish:'',
				nofinish:'',
				praiseCnt:'',
				avageLearningTime:'',
				studytime:'',
				pagesize: 15,
				currentpage: 1,
				total: 1
			}
		},
		methods:{
			getParams() {
				this.updateTitle = this.$route.params.updateTitle;
				this.liveColumnTitle = this.$route.params.liveColumnTitle;
				this.liveBroadcastid = this.$route.params.liveBroadcastid;
				this.isBm = this.$route.params.isBm;
				this.pathKey = this.$route.params.pathKey;
				this.courseCompanyid = this.$route.params.courseCompanyid;
				this.liveId = this.$route.params.liveId;
				this.teacherTitle = this.$route.params.teacherTitle;
				this.lecturerid = this.$route.params.lecturerid;
				console.log('liveDataColumn:',this.$route.params);
			},
			getDataDetails(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getLiveBroadcastStatistics?"+'liveBroadcastId=' + this.liveBroadcastid+'&type=1',
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							let backObj = res.data.data;
							this.assistant = backObj.assistant;
							this.lecturer = backObj.lecturer;
							this.signupCnt = backObj.signupCnt;
							this.studyCnt = backObj.studyCnt;
							this.finish = backObj.finish;
							this.nofinish = backObj.nofinish;
							this.praiseCnt = backObj.praiseCnt;
							this.avageLearningTime = backObj.avageLearningTime;
						}
					}
				});
			},
			getReBackDetails(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getLiveBroadcastStatistics?"+'liveBroadcastId=' + this.liveBroadcastid+'&type=2',
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							let backObj = res.data.data;
							this.signupCnt = backObj.signupCnt;
							this.studyCnt = backObj.studyCnt;
							this.finish = backObj.finish;
							this.nofinish = backObj.nofinish;
							this.praiseCnt = backObj.praiseCnt;
							this.avageLearningTime = backObj.avageLearningTime;
						}
					}
				});
			},
			getliveDataColumn(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getLiveBroadcastUserStudyList?"+ 'page=' + this.currentpage + '&num=' + this.pagesize + '&liveBroadcastId=' + this.liveBroadcastid+'&type=1',
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								let mss = this.tableData[i].studytime;
								var h = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
								var hours=h>=10?h:"0"+h;
								var m = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
								var minutes=m>=10?m:"0"+m;
								var ss = parseInt((mss % (1000 * 60)) / 1000);
								var seconds=ss>=10?ss:"0"+ss;
								this.tableData[i].studytime=hours + ":" + minutes + ":" + seconds ;
							}
						}
					}
				});
			},
			getStatus(){
				if(this.nowType=='first'){
					this.getDataDetails();
				}
			},
			box_panel1(){
				this.show_panel1=true;
				this.show_panel2=false;
				this.nowType='first';
				this.getDataDetails();
			},
			box_panel2(){
				this.show_panel1=false;
				this.show_panel2=true;
				this.nowType='second';
				this.getReBackDetails();
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getliveDataColumn();
			},
			reBack(){
				this.$router.push({
					name: 'liveColumn',
					params: {
						liveId:this.liveId,
						updateTitle:this.liveColumnTitle,
						pathKey:this.pathKey,
						teacherTitle:this.teacherTitle,
						lecturerid:this.lecturerid
					}
				})
			}
		},
		mounted(){
			this.getParams();
			if(this.liveBroadcastid==null){
				this.$store.commit('GET_liveDataColumn');
				var s =this.$store.state.liveDataColumn;
				this.updateTitle = s.updateTitle;
				this.liveColumnTitle = s.liveColumnTitle;
				this.liveBroadcastid = s.liveBroadcastid;
				this.isBm = s.isBm;
				this.pathKey = s.pathKey;
				this.liveId = s.liveId;
				this.teacherTitle = s.teacherTitle;
				this.lecturerid = s.lecturerid;
			};
			this.getStatus();
			this.getliveDataColumn();
			window.addEventListener("beforeunload",()=>{
				s={
					updateTitle:this.updateTitle,
					liveColumnTitle:this.liveColumnTitle,
					liveBroadcastid:this.liveBroadcastid,
					isBm:this.isBm,
					pathKey:this.pathKey,
					liveId:this.liveId,
					teacherTitle:this.teacherTitle,
					lecturerid:this.lecturerid
				}	
				this.$store.commit('SET_liveDataColumn', s);
			});
		}
	}
</script>

<style>
	.content_title b{color: #333;}
	.content_title span:nth-child(1){margin-right:50px;display: inline-block;color: #333;}
	.box_panel{margin: 20px 0;}
	.box_panel span{display: inline-block;margin-right:30px;color: #333;cursor: pointer;}
	.box_panel span.active{color: #44CEF6;}
	.box_data{overflow: hidden;}
	.box_data .dataUl{width: 100%;height:80px;box-sizing: border-box;border-top: 1px solid #ebebeb;border-right: 1px solid #ebebeb;}
	.box_data li{width: 20%;float:left;color: #333;}
	.box_data li span,.box_data li em{height: 40px;line-height: 40px;display: block;text-align: center;font-style: normal;border-bottom: 1px solid #ebebeb;border-left: 1px solid #ebebeb;}
	.table_title{margin: 20px 0;}
	.liveDataColumn .el-table .cell,.liveDataColumn .el-table th div,.liveDataColumn .el-table--border td:first-child .cell,.liveDataColumn .el-table--border th:first-child .cell {padding:0;text-align:center;}
</style>
